<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue IP</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
    <style>
        html {
            height: 100%;
        }
        body {
            background:linear-gradient(to top, #bbd2c5, #536976, #292e49); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            font-family: 'Roboto', sans-serif;
            text-align: center;

            margin-top: 50vh;
            transform: translateY(-50%);
        }
        .info {
            margin-top: 150px;
            color: white;
        }
    </style>
</head>
<body>
<div id="app">

    <div class="pure-g">
        <div class="pure-u-5-5">
            <vue-ip :on-change="ipChange" :placeholder="true" :ip="ip" :port="port" :theme="theme">IP Address</vue-ip>
        </div>
        <div class="pure-u-5-5">
            <div class="info">
                <h5>IP: {{ ip }}</h5>
                <h5 v-show="port">PORT: {{ port }}</h5>
                <h5>VALID: {{ valid }}</h5>
            </div>
        </div>
        <div class="pure-u-5-5">
            <button @click="changeIp(false)" class="pure-button pure-button-primary">Change IP</button>
            <button @click="changeIp(true)" class="pure-button pure-button-primary">Change IP & Port</button>
            <button @click="materialSwitch" class="pure-button pure-button-primary">Material Design {{ ((theme === 'material') ? 'Off' : 'On')}}</button>
            <!--<button @click="reset" class="pure-button">Reset</button>-->
        </div>
    </div>

</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="./dist/vue-ip.min.js"></script>
<script type="text/javascript">



    new Vue({
        el: '#app',
        components: {
            VueIp
        },
        data() {
            return {
                ip: '',
                port: false,
                valid: null,
                theme: 'material'
            };
        },
        beforeMount() {

            // Random IP Address on load
            // this.changeIp()

        },
        methods: {

            /**
             * Generate random number
             */
            random(min = 1, max = 270) {
                return Math.floor(Math.random() * max) + min;
            },

            /**
             * Triggers on change
             */
            ipChange(ip, port, valid) {
                this.ip = ip;
                this.port = port;
                this.valid = valid;
            },

            /**
             * Trigger a random ip and port change
             */
            changeIp(port) {
                this.ip = this.random() + '.' + this.random() + '.' + this.random() + '.' + this.random();

                if(port)
                    this.port = '' + this.random(1, 9) + this.random(1, 9) + this.random(1, 9) + this.random(1, 9);
                else
                    this.port = false;
            },

            /**
             * Switch on an off material design
             */
            materialSwitch() {

                if(!this.theme)
                    this.theme = 'material';
                else
                    this.theme = false;

            },

            /**
             * Reset everything
             */
            reset() {

                this.ip = '';
                this.port = false;
                this.valid = null;
                this.theme = 'material'

            }

        }
    });
</script>
</body>
</html>
